<template>
    <view style="background: #F5F5F5;padding: 20px 0 20px 0;">
        <view class="forlist" v-for="(item,index) in transArr" :key="index">
			<view class="cards">
			    <image class="photos" :src="item.avatar"></image>
			    <view class="texl">
					<view class="usertel">
					    <text class="leftcon">用户名:</text>
					    <text class="rightcon">{{item.nickname}}</text>
					</view>
			        <view class="usertel">
						<text class="leftcon">用户id:</text>
						<text class="rightcon">{{item.userId}}</text>
			        </view>
					<view class="usertel">
						<text class="leftcon">总盈利:</text>
						<text class="rightcon">{{item.totalProfit}}</text>
					</view>
					<view class="usertel">
						<text class="leftcon">剩余点卡:</text>
						<text class="rightcon">{{item.pointBalance}}</text>
					</view>
					<view class="usertel">
						<text class="leftcon">总佣金:</text>
						<text class="rightcon">{{item.totalRebateAmount}}</text>
					</view>
					<view class="usertel">
						<text class="leftcon">注册时间:</text>
						<text class="rightcon">{{item.createTime}}</text>
					</view>
					<view class="usertel">
						<text class="leftcon">更新时间:</text>
						<text class="rightcon">{{item.modifyTime}}</text>
					</view>
			    </view>
			</view>
        </view>
		<backTop :src="backTop.src"  :scrollTop="backTop.scrollTop"></backTop>
        <view v-show="isLoadMore">
            <uni-load-more :status="loadStatus"></uni-load-more>
        </view>
    </view>
</template>

<script>
    let uinfo;
    import uniLoadMore from '../../components/uni-load-more.vue';
    import request from "../../untils/request.js";
    import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
	import backTop from '../../components/back-top/back-top.vue';
    export default {
        components: {
            wybPopup,uniLoadMore,backTop
        },
		onPageScroll(e) {
			this.backTop.scrollTop = e.scrollTop;
		},
        data() {
            const currentDate = this.getDate({
                format: true
            })
            const currentDateedd = this.getDate({
                format: true
            })
            return {
				scrollTop: 0,
				backTop: {
					src: '../../static/top.png',
					scrollTop: 0
				},
                date: currentDate,
                dateend: currentDateedd,
                transArr: [],
                chobj: {},
                loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
                isLoadMore: false, //是否加载中
                page: '1',
                limt: '10'
            }
        },
        
        //筛选
        onNavigationBarButtonTap: function(e) {
            /* this.$refs.popup.show() // 显示
            this.date = '';
            this.dateend = ''; */
        },
        computed: {
            startDate() {
                return this.getDate('start');
            },
            endDate() {
                return this.getDate('end');
            }
        },
        onLoad(options) {
            uinfo = uni.getStorageSync('userInfo');
            this.chobj = {
                inviterId: uinfo.userId,
				status: 0,
                sortType: 'descend', //排序类型 升序:ascend 降序:descend ,
                sortAttribute: '3',
                pageSize: '10',
                pageNumber: this.page
            }
            this.cordList();
        },
        onReachBottom() { //上拉触底函数
            if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
                this.isLoadMore = true;
                this.page++;
                this.page = this.page.toString()
                this.chobj.pageNumber=this.page;
                this.cordList();
            }
        },
        onPullDownRefresh() {
            console.log('refresh');
			this.chobj.pageNumber='1';
			this.page = 1;
            this.cordList();
        },
        methods: {
            //社区人员列表
            cordList() {
                request.postMember('/user/inviter/queryUserInviter', this.chobj).then(res => {
                    if (res.code == '200') {
                        uni.stopPullDownRefresh();
                        if(res.data.items.length>0){
							if(this.chobj.pageNumber == '1'){
								this.transArr = res.data.items;
							}else{
							    this.transArr = this.transArr.concat(res.data.items);	
							}
                            //如果最后一页小于20个
                            if (res.data.items.length < this.limt) {
                                this.isLoadMore = true;
                                this.loadStatus = 'nomore';
                            } else {
                                this.isLoadMore = false;
								this.loadStatus = 'more';
                            }
                        }else{
                            this.isLoadMore = true;
                            this.loadStatus = 'nomore';
                        }
                    } else {
                        uni.stopPullDownRefresh();
                        uni.showToast({
                            icon: "none",
                            title: res.message,
                        });
                    }
                })
            },
			getDate(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate();
			
			    if (type === 'start') {
			        year = year - 60;
			    } else if (type === 'end') {
			        year = year + 2;
			    }
			    month = month > 9 ? month : '0' + month;
			    day = day > 9 ? day : '0' + day;
			    return `${year}-${month}-${day}`;
			}
        }
    }
</script>

<style>
    .forlist {
        width: 95%;
        background: #FFFFFF;
        border-radius: 10px;
		margin: 10px;
		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    }
	
	.cards {
	    display: flex;
	    align-items: center;
		padding: 5px;
	}
	
	.cards .photos {
	    width: 130rpx;
	    height: 130rpx;
	    border: 1px solid #FFFFFF;
	    border-radius: 50%;
	    margin-left: 10px;
	}
	
	.cards .texl {
		margin-left: 30px;
	}
	
	.cards .texl .naickv {
	    display: flex;
	    width: 290rpx;
	}
	
	.cards .texl .nicker {
	    font-size: 18px;
	    font-family: Source Han Sans CN;
	    font-weight: 400;
	    line-height: 20px;
	    color: #ADB0BB;
	    margin: 0 0 10rpx 0;
	}
	
	.cards .texl .usertel {
	    font-size: 14px;
	    font-family: Aileron;
	    font-weight: 400;
	    line-height: 20px;
	    color: #ADB0BB;
	}
	
	.leftcon {
	    font-size: 14px;
	    font-family: Source Han Sans CN;
	    font-weight: 400;
	    line-height: 21px;
	    color: #ADB0BB;
	    display: inline-block;
	    width: 70px;
	}
	
	.rightcon {
	    font-size: 14px;
	    font-family: Aileron;
	    font-weight: 400;
	    line-height: 21px;
	    color: #333333;
	}
</style>
